<template>
  <div>
    <!-- 搜索区域 -->
    <div style="margin-bottom: 20px">
      <el-input v-model="data.studentName" placeholder="请输入学生姓名" style="width: 200px" clearable></el-input>
      <el-input v-model="data.clubName" placeholder="请输入社团名称" style="width: 200px; margin-left: 10px"
                clearable></el-input>
      <el-select v-model="data.status" placeholder="请选择状态" style="width: 200px; margin-left: 10px" clearable>
        <el-option label="待审核" value="待审核"/>
        <el-option label="已通过" value="已通过"/>
        <el-option label="已拒绝" value="已拒绝"/>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="data.tableData" stripe @row-dblclick="handleRowClick" style="cursor: pointer;">
      <el-table-column prop="studentName" label="学生姓名"/>
      <el-table-column prop="clubName" label="社团名称"/>
      <el-table-column prop="applyTime" label="申请时间"/>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag
              :type="scope.row.status === '已通过' ? 'success' : scope.row.status === '已拒绝' ? 'danger' : 'warning'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">

        <template #default="scope">
          <el-button
              type="success"
              size="small"
              @click="handleApprove(scope.row)"
              :disabled="scope.row.status !== '待审核' || isProcessing"
          >通过
          </el-button>
          <el-button
              type="danger"
              size="small"
              @click="handleReject(scope.row)"
              :disabled="scope.row.status !== '待审核' || isProcessing"
          >拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情对话框 -->
    <el-dialog
        v-model="applicationDialogVisible"
        v-drag-dialog
        :title="`${currentRow.studentName}的申请详情`"
        width="50%"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="学生姓名">{{ currentRow.studentName }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ currentRow.studentId || '无' }}</el-descriptions-item>
        <el-descriptions-item label="社团名称">{{ currentRow.clubName }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ currentRow.applyTime }}</el-descriptions-item>
        <el-descriptions-item label="申请理由">
          <div style="white-space: pre-line;">{{ currentRow.reason || '无' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag>
            {{ currentRow.status }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

    </el-dialog>

    <!-- 分页区域 -->
    <div style="margin-top: 20px">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import {dayjs, ElMessage, ElMessageBox} from 'element-plus'
import request from '@/utils/request'

const user = JSON.parse(localStorage.getItem('xm-pro-user')) || {}
const data = reactive({
  studentName: null,
  clubId: user.clubId,
  clubName: null,
  status: null,
  tableData: [],
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const isProcessing = reactive(false)
const applicationDialogVisible = ref(false)
const currentRow = ref({});

const handleRowClick = (row) => {
  currentRow.value = row;
  applicationDialogVisible.value = true;
};
// 加载数据
const load = () => {
  request.get('/club/application', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      studentName: data.studentName,
      clubId: data.clubId,
      clubName: data.clubName,
      status: data.status
    }
  }).then(res => {
    if (res.code === '200') {
      // 处理列表中的 applyTime 字段
      const formattedList = res.data.list.map(item => ({
        ...item,
        applyTime: dayjs(item.applyTime).format('YYYY年MM月DD日')
      }));
      data.tableData = formattedList
      data.total = res.data.total

    } else {
      ElMessage.error(res.msg || '加载数据失败')
    }
  }).catch(err => {
    console.error('加载数据失败:', err)
    ElMessage.error('加载数据失败')
  })
}

// 审批通过
const handleApprove = async (row) => {
  //修改社团申请表的状态
  try {
    const res = await request.post('/club/application/approve', {
      id: row.id,
      status: '已通过'
    })
    if (res.code === '200') {
      ElMessage.success('审批成功')
      // 更新当前报名列表的状态
      row.status = '已通过'
      isProcessing.value = true
    } else {
      ElMessage.error(res.msg || '审批失败')
    }
  } catch (err) {
    ElMessage.error('审批失败')
    console.error(err)
  }
}

//审批拒绝
const handleReject = async (row) => {
  try {
    const res = await request.post('/club/application/reject', {
      id: row.id,
      status: '已拒绝'
    })
    if (res.code === '200') {
      ElMessage.success('拒绝成功')
      // 更新当前报名列表的状态
      row.status = '已拒绝'
      isProcessing.value = true
    } else {
      ElMessage.error(res.msg || '拒绝失败')
    }
  } catch (err) {
    ElMessage.error('拒绝失败')
    console.error(err)
  }
}

// 分页大小改变
const handleSizeChange = (val) => {
  data.pageSize = val
  load()
}

// 页码改变
const handleCurrentChange = (val) => {
  data.pageNum = val
  load()
}

// 页面加载时获取数据
onMounted(() => {
  load()
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 